<!-- 资讯管理页面 -->

<div class="row">
    <div><button type="button" id="message_add" class="btn btn-success" data-toggle="modal" data-target="#messageModal">发布资讯</button></div>
    <div>
        <select name="parentId" id="message_select" class="form-control">
      <option value="">请选择所属栏目</option>
    </select></div>
    <div>
        <div><input id="message_name" type="text" class="form-control" placeholder="请输入标题"></div>
    </div>
</div>

<table class="table table-hover" id="message_table">
    <thead>
        <td>序号</td>
        <td>标题</td>
        <td>发布日期</td>
        <td>所属栏目</td>
        <td>操作</td>
    </thead>
    <tbody></tbody>
</table>

<!-- 分页代码 -->
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="currentnum">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>

        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

<!-- 资讯Modal -->
<div class="modal fade" id="messageModal" tabindex="-1" message="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" message="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div>
                    <b>标题:</b>
                    <input class="form-control" type="text" name="title">
                </div>
                <div>
                    所属栏目:
                    <select class="form-control" name="parentId" id="classify_select"></select>
                </div>
                <div>
                    正文:
                    <textarea class="form-control" rows="6" name="content"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="message_submit">发布</button>
            </div>
        </div>
    </div>
</div>

<script>
    var user;
    var page = 1; //设置起始页
    var pageSize = 10; //设置每页信息数量

    //封装查询请求
    function messageget(res) {
        // alert(res.message)
        //清空tbody
        $('#message_table tbody').empty();
        res.data.list.forEach(function(item, index) {
                //item-->每个用户对象
                var newTr = $(`                    
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.title}</td>
                        <td>` + new Date(item.publishTime).toLocaleString() + `</td>
                        <td>${item.categoryId}</td>
                        <td>
                        <button data-id="${item.id}" class="btn btn-info" id="message_more">查看</button>
                        <button data-item='${JSON.stringify(item)}' class="btn btn-default" id="message_update" data-toggle="modal" data-target="#messageModal">编辑</button>
                        <button data-id="${item.id}" class="btn btn-danger" id="message_delete">删除</button>
                        </td>
                    </tr>`);
                $('#message_table tbody').append(newTr)

            })
            //清空分页,再插入分页

        $(".clicknum").remove();
        var num = Math.ceil(res.data.total / pageSize);
        // alert(num)
        for (var i = num; i > 0; i--) {
            $('.currentnum').after(
                '<li class="clicknum"><a href="#">' + i + '</a></li>')
        }
    }

    // 查询第一页资讯
    function messagemsgget() {
        $.get(baseURL + '/article/pageQuery', {
            page,
            pageSize
        }, function(res) {
            messageget(res);
        });
    }
    messagemsgget();

    //查询所属栏目下拉菜单
    $.get(baseURL + '/category/findAll', function(res) {
        // console.log(res.data);
        //清空下拉列表
        $('select[name=parentId]').empty();
        $('select[name=parentId]').append(`<option value="">请选择所属栏目</option>`)
        res.data.forEach(function(item) {
            var newOpt = $(`
              <option value="${item.id}">${item.name}</option>
              `)
            $('select[name=parentId]').append(newOpt)
        })
    })

    //点击页码事件
    $('.pagination').click(function() {
        // alert($(event.target).text())
        page = $(event.target).text();
        messagemsgget();
    })

    //添加功能
    $("#message_add", ).click(function() {
        //清空user,设置模态框头部
        user = null;
        $('.modal-title').html('发布新资讯');
        //清空表单数据
        $('input[name=title]').val('');
        $('select[id=classify_select]').val('');
        $('textarea[name=content]').val('');
    });

    //修改功能事件代理 id="message_update"
    $('#message_table tbody').on('click', '#message_update', function() {
        // console.log(user);
        user = $(this).attr('data-item');
        user = JSON.parse(user);
        console.log(user);
        $('input[name=title]').val(user.title);
        $('select[id=classify_select]').val(user.categoryId);
        $('textarea[name=content]').val(user.content);
        //设置模态框标题
        $('.modal-title').html('更新资讯')
    });

    //新增修改提交按钮  新增:保存数据  修改:更新数据   传id代表修改,不传id代表新增
    $("#message_submit").click(function() { //给后加的节点绑定事件
        //获取用户输入的信息
        var title = $('input[name=title]').val();
        var content = $('textarea[name=content]').val();
        var categoryId = $('select[id=classify_select]').val();
        // console.log(title, content, categoryId);
        //访问后台接口,保存到数据库,保存成功之后刷新数据
        $.post(baseURL + '/article/saveOrUpdate', {
            id: user ? user.id : '',
            title: title,
            content: content,
            categoryId: categoryId,
        }, function(res) {
            // console.log(res);
            //提示保存成功
            if (res.status == 200) {
                // alert('保存成功');
                messagemsgget();
            }
        });
        $("#messageModal").modal("hide")
        $('.modal-backdrop').remove(); //去掉遮罩层
    })

    //移除功能,事件代理 id="message_delete"
    $('#message_table tbody').on('click', '#message_delete', function() {
        // console.log(this);
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        // console.log(id);
        if (confirm('确认删除?')) {
            $.get(baseURL + '/article/deleteById', {
                id: id
            }, function(res) {
                console.log(res);
                messagemsgget();
            });
        }
    });

    //查看功能,事件代理,id="message_more"
    $('#message_table tbody').on('click', '#message_more', function() {
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        $.get(baseURL + '/article/findById', {
            id: id
        }, function(res) {
            console.log(res);
        })
    })
</script>